<table class="print-table margin-top-s">
  <thead>
    <tr class="print-header">
      <th class="print-cell" style="width: 20%">
        {{'dashboard.summary.SERVICE' | translate }}
      </th>
      <th class="print-cell" style="width: 30%">
        {{ 'dashboard.summary.POD' | translate }}
      </th>
      <th class="print-cell" style="width: 30%">
        {{ 'dashboard.body.panel_title.APPLICATIONS' | translate }}
      </th>
      <th class="print-cell" style="width: 10%">
        {{ 'dashboard.body.panel_title.POLICY_MODE' | translate }}
      </th>
      <th class="print-cell" style="width: 10%">
        {{ 'dashboard.body.panel_title.POLICY_ACTION' | translate }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="print-row" *ngFor="let row of groupedGridData; let i = index" [attr.data-index]="i">
      <td class="print-cell" style="width: 20%" *ngIf="row.service" [attr.rowspan]="row.rowspan">
        {{ row.service }}
      </td>
      <td class="print-cell" style="width: 30%">
        {{ row.pod_name }}
      </td>
      <td class="print-cell" style="width: 30%">
        {{ row.applications }}
      </td>
      <td class="print-cell" style="width: 10%">
        <span class="action-label {{ colourMap[row.policy_mode] }}">{{ row.policy_mode }}</span>
      </td>
      <td class="print-cell" style="width: 10%">
        <span class="action-label {{ colourMap[row.policy_action] }}">
          {{ 'policy.action.' + row.policy_action.toUpperCase() | translate }}
        </span>
      </td>
    </tr>
  </tbody>
</table>
